import React, { Component } from 'react'
import '../App.css'
import user from '../image/用户头像.png'
import set from '../image/设置.png'
import more from '../image/更多.png'
import doctor from '../image/我的医生.png'
import equipment from '../image/我的设备.png'
import plan from '../image/健康计划.png'
import appraisal from '../image/健康测评.png'
import aunt from '../image/姨妈助手.png'
import collect from '../image/我的收藏.png'
import chunyu from '../image/春雨客服.png'
import recommend from '../image/有奖推荐.png'
import about from '../image/关于春雨医生.png'

export default class My extends Component {

    //跳转到登录
    tologin = () => {
        this.props.history.push('/login');
    }
    tochar = () => {
        this.props.history.push('/char')
    }
    toorder = () => {
        this.props.history.push('/order')
    }
    toheatul = () => {
        this.props.history.push('/heatul')
    }
    state = {
        img: localStorage.getItem('img') || user,
        username: localStorage.getItem('username') || '登录与注册',
    }
    render() {
        const { img, username } = this.state
        return (
            <div className='wrap'>
                <header>
                    <div className='right'>
                        <div>
                            <img src={set} alt="" />
                        </div>
                        <div>
                            <img src={more} alt="" />
                        </div>
                    </div>
                </header>
                <main>
                    <dl className="kuang">
                        <dt><img src={img} alt="" /></dt>
                        <dd>
                            <h3 onClick={() => { this.tologin() }}>{username}</h3>
                            <p>账户管理 &gt;</p>
                        </dd>

                    </dl>
                    <div className="one">
                        <h4>VIP   美洽会员</h4>
                        <p>&gt;</p>
                    </div>
                    <div className="two">
                        <div className="t">
                            <p className="big">0.00</p>
                            <p className="grap">账户余额(元)</p>
                        </div>
                        <div className="w">
                            <p className="big">0</p>
                            <p className="grap">优惠券(张)</p>
                        </div>
                        <div className="o">
                            <p className="big">0</p>
                            <p className="grap">金币</p>
                        </div>
                    </div>
                    <div className="myorder" onClick={() => { this.toorder() }}>
                        <h5>我的订单</h5>
                        <p>查看全部 &gt;</p>

                    </div>
                    <div className="myorder2" onClick={() => { this.toheatul() }}>
                        <h5>健康档案</h5>
                        <button>+新建档案</button>

                    </div>
                    <div className="three">
                        <h3>工具与服务</h3>
                        {/* <a href=""> */}
                        <dl onClick={() => { this.tochar() }}>
                            <dt><img src={doctor} alt="" /></dt>
                            <dd>我的医生</dd>
                        </dl>
                        {/* </a> */}
                        {/* <a href=""> */}
                        <dl>
                            <dt><img src={equipment} alt="" /></dt>
                            <dd>我的设备</dd>
                        </dl>
                        {/* </a> */}
                        {/* <a href=""> */}
                        <dl>
                            <dt><img src={plan} alt="" /></dt>
                            <dd>健康计划</dd>
                        </dl>
                        {/* </a> */}
                        {/* <a href=""> */}
                        <dl>
                            <dt><img src={appraisal} alt="" /></dt>
                            <dd>健康测评</dd>
                        </dl>
                        {/* </a> */}
                        {/* <a href=""> */}
                        <dl>
                            <dt><img src={aunt} alt="" /></dt>
                            <dd>姨妈助手</dd>
                        </dl>
                        {/* </a> */}
                        {/* <a href=""> */}
                        <dl>
                            <dt><img src={collect} alt="" /></dt>
                            <dd>我的收藏</dd>
                        </dl>
                        {/* </a> */}
                        {/* <a href=""> */}
                        <dl>
                            <dt><img src={chunyu} alt="" /></dt>
                            <dd>美洽客服</dd>
                        </dl>
                        {/* </a> */}
                        {/* <a href=""> */}
                        <dl>
                            <dt><img src={recommend} alt="" /></dt>
                            <dd>有奖推荐</dd>
                        </dl>
                        {/* </a> */}
                        {/* <a href=""> */}
                        <dl>
                            <dt><img src={about} alt="" /></dt>
                            <dd>关于美洽医生</dd>
                        </dl>
                        {/* </a> */}
                    </div>
                </main>
            </div>
        )
    }
}
